<template>
  <div class="cfDialog-index">
    <el-dialog
      :title="dialogObj.title"
      :width="device == 'mobile'?'90%':dialogObj.width"
      v-if="dialogObj.visible"
      :visible="dialogObj.visible"
      ref="dialogObj"
      :close-on-click-modal="false"
      :append-to-body="dialogObj.appendToBody"
      :modal-append-to-body="dialogObj.modalAppendToBody"
      :before-close="beforeClose"
    >
      <div class="dialog-content">
        <slot name="content"></slot>
      </div>
      <span class="dialog-footer" slot="footer">
        <el-button size="small" @click="handleCancel">取消</el-button>
        <slot name="footer"></slot>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      dialogObj: {
        type: Object,
        default: ({})
      }
    },
    data() {
      return {
        
      }
    },
    computed: {
      device() {
        return this.$store.getters.device;
      }
    },
    methods: {
      beforeClose() {
        this.dialogObj.visible = false;
      },
      handleCancel() {
        this.$emit('cancel');
        this.beforeClose();
      }
    },
  }
</script>

<style lang="scss">
// .cfDialog-index {
  .el-dialog__header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    .el-dialog__title {
      font-size: 16px;
    }
  }
  .el-dialog__body {
    padding: 12px 16px !important;
  }
  .dialog-content {
    min-height: 120px;
    max-height: 476px;
    overflow: overlay;
    padding: 0 12px;
    .dialog-subtitle {
      font-size: 14px;
      font-weight: bold;
      line-height: 36px;
      border-bottom: 1px solid #eee;
      margin-bottom: 12px;
      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 16px;
        background: var(--current-color);
        margin-right: 8px;
        vertical-align: middle;
        margin-top: -2px;
      }
    }
  }
  .el-dialog__footer {
    padding: 12px;
    border-top: 1px solid #eee;
    box-sizing: border-box;
  }
// }
</style>